<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css"></style>
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../libs/swiper-bundle.min.css">
    <script src="../libs/require.min.js" data-main="../js/detail.js"></script>
</head>

<body>
    <header>
        <div class="top">
            <div class="logo">
                <a href="#/">
                    <img src="../images/2.png" alt="logo">
                    <div class="right">
                        <h3>熊猫优选</h3>
                        <span>XIONG MAO YOU XUAN</span>
                    </div>
                </a>
            </div>
            <div class="search">
                <form action="">
                    <span></span>
                    <input type="text" placeholder="搜索商品，发现更多优惠" class="info">
                    <button class="searchBtn">搜索</button>
                </form>
            </div>
            <div class="top-right">
                <ul>
                    <li>
                        <img src="../images/3.png" alt="logo">
                        <span>全程包邮</span>
                    </li>
                    <li>
                        <img src="../images/4.png" alt="">
                        <span>7天退换</span>
                    </li>
                    <li>
                        <img src="../images/5.png" alt="">
                        <span>品质保证</span>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <nav>
        <div class="navigation">
            <ul class="text-nav">
                <li style="background-color: #fee44e;" class="text-nav-li"><a href="http://localhost:9527/" style=" color: #43240c;">首页</a>
                </li>
                <a href="http://localhost:9527/html/shoppingCar.html">
                    <div class="cart">
                        购物车( <span class="cart-num"> 0 </span> )
                    </div>
                </a>
            </ul>
        </div>
    </nav>
    <div class="details">
        <div class="commdity">
            <div class="cmd-info">
                <div class="photos">
                    <div class="autoplay">
                        <!-- 轮播图 -->
                        <div class="shop_banner swiper-container">
                            <ul class="swiper-wrapper">
                            </ul>
                            <div class="swiper-pagination"></div>
                        </div>

                    </div>
                </div>
                <div class="container">
                </div>
                <script type="text/html" id="details-template">
                    <h1 class="cmd-title">
                        <div class="title-icons">
                            {{if infos.platform === 1}}
                            <img src="../images/tian.png" class="platform">
                            {{else}}
                            <img src="../images/tao.png" class="platform">
                            {{/if}}
                            <img src="../images/bao.png" class="free-postage">
                        </div>
                        {{infos.title}}
                    </h1>
                    <div class="cmd-price">
                        <p class="original-price">
                            <i> {{infos.originPrice}}</i>
                        </p>
                        <div class="last-price">
                            <span>券后价:</span>
                            <span class="price">
                                <i class="value-tag">￥</i>
                                {{if infos.price.toString().indexOf(".")>0}}
                                {{infos.price.toString().slice(0,infos.price.toString().indexOf("."))}}
                                <span class="digit">{{infos.price.toString().slice(infos.price.toString().indexOf("."),infos.price.toString().length)}}</span> 
                                {{else}}
                                {{infos.price}}
                                {{/if}}
                            </span>
                            <span class="coupon-info">
                                {{infos.couponValue}}
                            </span>
                            <span class="sale-num">{{infos.saleNum}}人已买</span>
                        </div>
                    </div>
                    <p class="expire-date">
                        <span>
                            优惠有效期：{{infos.expireDate}}
                        </span>
                    </p>
                    <div class="clear"></div>
                    <a href="./shoppingCar.html?id={{infos.id}}"><button class="goTB-btn">加入购物车</button></a>
                </script>
            </div>
                <div class="shop-info">
                </div>
                <script type="text/html" id="shop-template">
                    <div class="content">
                        <span class="line"></span>
                        <span class="text">卖家信息</span>
                        <span class="line"></span>
                    </div>
                    <img src="{{shopper.coverUrl}}" alt="" class="shop-img">
                    <p class="shop-name">{{shopper.nickname}}</p>
                    <div class="shop-score">
                        <ul class="character">
                            <li>描述</li>
                            <li>服务</li>
                            <li>物流</li>
                        </ul>
                        <ul class="score">
                            <li>4.8</li>
                            <li>4.8</li>
                            <li>4.8</li>
                        </ul>
                    </div>
                </script>
                <div class="cmd-details">
                    <div class="imgs">

                    </div> 
                </div>
              
                <script type="text/html" id="show-template">
                   
                    {{each picshow pic}}
                       <img src="{{pic.image.url}}" alt="">
                    {{/each}}
                </script>
            </div>
        </div>
        <footer>
            <div class="foot">
                <div class="foot-contain">
                    <img src="../images/2.png" alt="">
                    <div class="center">
                        <h1 class="foot-title">熊猫优选</h1>
                        <p class="slogan">年轻人网购首选<br>购物领券更省钱</p>
                    </div>
                </div>
                <div class="about-us">
                    <p class="items">
                        <span class="line">|</span>
                        <a href="#" class="item">下载APP</a>
                    </p>
                </div>
                <div class="footer-bottom">
                    <img src="../images/policeIcon.png" alt="" srcset="">
                    <p class="msg">
                        <span>浙公安网备案 33010602009949号 | </span>
                        ICP备案号:
                        <a href="#">浙ICP备17012864号-1</a>
                    </p>
                    <img src="../images/license.png" alt="" srcset="">
                    <p class="msg">
                        <a href="#">证照信息</a>
                    </p>
                </div>
            </div>
        </footer>
        <div class="footer-down">
            <img src="../images/aqkx_83x30.png" alt="" srcset="">
        </div>
        <script type="text/html" id="slide-template">
            {{each slides slide}}
            <li class="swiper-slide"><img src="{{slide.url}}" alt=""></li>
            {{/each}}
        </script>
</body>

</html>